<template>
	<view class="container">
		<!-- <u-navbar leftIconSize="40" placeholder titleStyle="font-size:36rpx;font-weight:600;" title="充值"
			bgColor="transparent" :autoBack="true"></u-navbar> -->
		<view class="pd-28">
			<view class="balance">
				<image class="balance-bg" src="/static/image/bg3.png"></image>
				<view class="balance-content flex fd_c ai_center jc_center">
					<view class="balance-value">{{userInfo.money}}</view>
					<view class="balance-title">算力余额</view>
				</view>
			</view>
		</view>
		<view class="pd-28 bg-white">
			<view class="text-28 text-b mgb-40">充值额度</view>
			<view class="flex fw_wrap" style="margin-right: -32rpx;">
				<view class="mgb-30 mgr-32 w-210 h-138 flex fd_c ai_center jc_center radio-20"
					:class="checked==index?'active':'border-D3D3D3 text-666'" @click="checked=index"
					v-for="(item,index) in list">
					<view class=" text-b text-30">{{item.title}}</view>
					<view class="text-24 mgt-16">¥{{item.price}}</view>
				</view>
			</view>
		</view>
		<view class="footer bg-white">
			<view class="footer-fixed flex">
				<view class="footer-btn flex1" @click="recharge">充值</view>
				<view class="p-abs abs_x bottom-100-20 text-24 w flex jc_center ai_center text-666">
					<checkbox @click="agree = !agree" />
					我已阅读同意 <text style="color:#4d85ff" @click="jump('/pages/agree/agree')">《平台算力充值协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: 0,
				agree:false,
				userInfo:{},
				list:[]
			}
		},
		onLoad() {
			this.getUserInfo()
			this.getList()
		},
		methods: {
			jump(url){
				uni.navigateTo({
					url
				})
			},
			getUserInfo(){
				this.get('user/index').then(res=>{
					this.userInfo = res.data.user
				})
			},
			getList(){
				this.get('recharge/setting').then(res=>{
					console.log(res.data)
					this.list = res.data.list.data
				})
			},
			recharge(){
				if(!this.agree){
					uni.showToast({
						title:'请阅读并同意《平台算力充值协议》',
						icon:'none'
					})
					return false
				}
				this.post('recharge/recharge',{
					setting_id:this.list[this.checked].id
				}).then(res=>{
					console.log(res)
					let that = this
					//TODO:唤起微信支付？
					var onBridgeReady = () => {
					  // eslint-disable-next-line
					  WeixinJSBridge.invoke(
					    "getBrandWCPayRequest",
					    {
					      appId: res.data.appId, //公众号ID，此处必传
					      timeStamp: res.data.timestamp,
					      nonceStr: res.data.nonceStr,
					      package: res.data.package,
					      signType: res.data.signType,
					      paySign: res.data.paySign
					    },
					    function (res) {
					      uni.hideLoading();
					      if (res.err_msg == "get_brand_wcpay_request:ok") {
					        uni.showToast({
					          title: "支付成功",
					          icon: "none",
							  success: (res) => {
							  	that.getUserInfo()
								uni.navigateBack()
							  }
					        });
					      }
					      if (res.err_msg == "get_brand_wcpay_request:fail") {
					        uni.showToast({
					          title: "支付失败",
					          icon: "none"
					        });
					      }
					      if (res.err_msg == "get_brand_wcpay_request:cancel") {
					        uni.showToast({
					          title: "支付取消",
					          icon: "none"
					        });
					      }
					    }
					  );
					};
					//调用微信支付接口
					if (typeof WeixinJSBridge == "undefined") {
					  if (document.addEventListener) {
					    document.addEventListener(
					      "WeixinJSBridgeReady",
					      onBridgeReady,
					      false
					    );
					  } else if (document.attachEvent) {
					    document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
					    document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
					  }
					} else {
					  onBridgeReady();
					}
					
				})
				// uni.showToast({
				// 	title:'充值成功',
				// 	success: (res) => {
				// 		uni.navigateBack()
				// 	}
				// })
			}
		}
	}
</script>

<style scoped lang="scss">
	.active {
		background-image: url('@/static/image/border4.png');
		background-size: 100% 100%;
	}

	.h-138 {
		height: 138rpx;
	}

	.border-D3D3D3 {
		border: 1px solid #D3D3D3;
	}

	.container {
		min-height: 100vh;
		background-image: url('@/static/image/bg.png');
		background-size: 100% auto;
		padding: 28rpx 0;

		.balance {
			height: 200rpx;
			position: relative;

			&-bg {
				width: 100%;
				height: 100%;
				display: block;
			}

			&-content {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				padding: 0 28rpx;

				.balance-title {
					font-size: 24rpx;
					color: #D3BD98;
					margin-top: 20rpx;
				}

				.balance-value {
					color: #D3BD98;
					font-size: 40rpx;
					font-weight: bold;
				}

				.balance-btn {
					width: 128rpx;
					height: 54rpx;
					background: linear-gradient(270deg, #21FFE7 0%, #88FEC8 100%);
					border-radius: 27rpx;
					text-align: center;
					line-height: 54rpx;
					color: #215139;
					font-size: 24rpx;
				}
			}
		}
	}

	.bottom-100-20 {
		bottom: calc(100% + 20rpx);
	}

	.footer {
		height: 114rpx;

		.footer-fixed {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 6rpx 30rpx 20rpx;
		}

		&-btn {
			height: 88rpx;
			background-image: linear-gradient(270deg, #17FEE9, #94FDC4);
			border-radius: 44rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 32rpx;
		}
	}
</style>